<template>
	<view class="mord">
		<view class="list">
			<view class="li">
				<view class="" v-for='la in returnDetail.oSaleReturnDetails' :key="la.id">
					<view class="title">
						<image src="../../static/img/3/3-78.png"></image>{{returnDetail.cStatusName}}
					</view>
					<view class="imgbox">
						<image :src="la.oProductAlbum.cFolder" mode="widthFix"></image>
					</view>
					<view class="text">
						<view class="h1">
							{{la.cProductName}}
						</view>
						<view class="p">
							￥{{la.fSalePrice}}
						</view>

					</view>

					<view class="oderMsg">
						<view class="h3">
							退货申请明细
						</view>
						<view class="p">
							<text>申请单号</text>
							<view class="txt">
								{{returnDetail.cSaleReturnNo}}
							</view>
						</view>
						<!-- 	<view class="p" v-if='data.eInvoiceEnable'>
								<text>发票类型</text>
								<view class="txt">
									电子纸质发票
								</view>
							</view>
							<view class="p" v-if='data.eInvoiceEnable'>
								<text>发票抬头</text>
								<view class="txt">					
									Windir
								</view>
							</view>
							<view class="p" v-if='data.eInvoiceEnable'>
								<text>发票内容</text>
								<view class="txt">
									日用品
								</view>
							</view> -->
						<view class="p">
							<text>售后类型</text>
							<view class="txt">
								{{returnDetail.iReturnType?'退货退款':'仅退款'}}
							</view>
						</view>

						<view class="p">
							<text>退款原因</text>
							<view class="txt">
								{{la.reason}}
							</view>
						</view>
						<view class="p">
							<text>联系人</text>
							<view class="txt">
								{{returnDetail.cReceiver}}
							</view>
						</view>
						<view class="p">
							<text>联系电话</text>
							<view class="txt">
								{{returnDetail.cReceiveMobile}}
							</view>
						</view>
					</view>
				</view>

			</view>
			<view class="tips">注：退款退货订单只能修改一次，请谨慎填写信息！</view>
			<view class="group-btn" v-if="returnDetail.cSaleReturnStatus!='CONFIRMSALERETURNORDER'&&returnDetail.cSaleReturnStatus!='ENDSALERETURN'&&returnDetail.cSaleReturnStatus!='OPPOSESALERETURN'&&returnDetail.cSaleReturnStatus!='CANCELSALERETURN'">
				<text class="cancel" @click="cancel">取消退款</text>
				<text class="fixd" @click="modify">修改</text>
			</view>
			<view class="group-btn" v-if="returnDetail.cSaleReturnStatus=='CONFIRMSALERETURNORDER'">
				<text class="fixd" @click="openshow">填写运单信息</text>
			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="box">
				<view class="title">填写运单号</view>
				<view class="input-group">
					<view class="input-item">
						
						<text>物流公司</text>
						<picker @change="bindPickerChange" class="right-box" :value="index" :range="array">
						    <view class="uni-input">{{array[index]}}</view>
						</picker>
					</view>
					<view class="input-item">
						
						<text>运单号</text>
						<view class="right-box">
							<input type="text" class="uni-input" v-model="logisticsNo" placeholder="填写运单号"  />
						</view>
						
					</view>
					
				</view>
				<view class="btn-group">
					<text class="cancel" @click="sendData">确定</text>
					<text class="fixd" @click="closepopup">取消</text>
				</view>
			</view>
			
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'

	export default {
		name: "",
		components: {
			uniPopup
		},
		data() {
			return {
				lo: 0,
				ce: 1,
				meng: false,
				con: '',
				max: 500,
				qq: '',
				liso: [],
				yuan: '请选择退货原因',
				data: [],
				money: 0,
				num: 0,
				returnType: 0,
				showType: false,
				selectType: 0,
				price: '',
				numbers: '',
				returnDetail: {},
				cSaleReturnNo: '',
				cOrderNo: '',
				array:"",
				index:0,
				logisticsNo:'',
				logisticCorpId:'',
				clist:[]
			}
		},
		onLoad(options) {
			this.cSaleReturnNo = options.cSaleReturnNo
			var that = this;
			that.ids = options.id
			that.num = options.num
			that.money = options.money
			that.$Request.post(
				that.$api.httpApi.user.closeoder + '&token=' + that.$SysCache.get('token'), {
					type: "orderrefund"
				}
			).then(res => {
				if (res.code == 200) {
					that.liso = res.data;
				}
			});
			that.$Request.post(
				that.$api.httpApi.user.getLogisticsCorp + '&token=' + that.$SysCache.get('token'), {}
			).then(res => {
				if (res.code == 200) {
					that.array = []
					that.clist = res.data
					this.logisticCorpId = res.data[0].id
					res.data.forEach(item=>{
						that.array.push(item.name)
					})
				}
			});


			that.$Request.post(
				that.$api.httpApi.order.getSaleReturnBySaleReturnNo + '&token=' + that.$SysCache.get('token'), {
					cSaleReturnNo: options.cSaleReturnNo
				}
			).then(resd => {
				if (resd.code == 200) {
					console.log(resd.data)

					this.returnDetail = resd.data

					this.cOrderNo = resd.data.cOrderNo


				}
			});





		},
		methods: {
			oder(s) {
				let that = this;
				that.$Request.post(
					that.$api.httpApi.user.oder + '&token=' + that.$SysCache.get('token'), {
						'onLineOffLine': 0,
						'orderType': 2,
						status: s,
						pageSize: 300
					}
				).then(res => {
					if (res.code == 200) {
						that.data = res.data.orders;
					}
				});
			},
			changeActive(str) {
				this.active = str

				if (str == 1) {
					// this.getBrand()
				} else {
					this.oder('ENDORDER');
				}
			},
			bach(data, id) {
				var that = this;
				var data = {
					dat: data,
					id: id
				}
				uni.navigateTo({
					url: '/pages/user/orderPing?data=' + JSON.stringify(data)
				})
			},
			cancel() {
				let that = this;

				uni.showModal({
					title: "提示",
					confirmText: "确定",
					content: "取消退款",
					success: function(res) {
						if (res.confirm) {
							that.$Request.post(
								that.$api.httpApi.order.cancelSaleReturn + '&token=' + that.$SysCache.get('token'), {
									"cSaleReturnNo": that.returnDetail.cSaleReturnNo
								}
							).then(res => {
								if (res.code == 200) {
									uni.navigateBack({

									})
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})


			},
			modify() {
				uni.navigateTo({
					url: '/pages/user/modify?cOrderNo=' + this.cOrderNo + '&cSaleReturnNo=' + this.returnDetail.cSaleReturnNo
				})
			},
			openshow() {
				this.$refs.popup.open()
			},
			bindPickerChange(e){
				this.index = e.target.value
				this.logisticCorpId = this.clist[e.target.value].id
			},
			closepopup(){
				this.$refs.popup.close()
			},
			sendData(){
				
				let that = this;
				that.$Request.post(
					that.$api.httpApi.user.returnGoods + '&token=' + that.$SysCache.get('token'), {
						'detailId': this.returnDetail.oSaleReturnDetails[0].iDetailId,
						'orderNo': this.returnDetail.cOrderNo,
						logisticCorpId: this.logisticCorpId,
						logisticsNo: this.logisticsNo
					}
				).then(res => {
					if (res.code == 200) {
						this.$refs.popup.close()
						uni.showToast({
							title:res.message
						})
					}
				});
			}
			
		},
		onNavigationBarButtonTap() {
			// uni.navigateTo({
			//     // url: '/pages/user/vipjs'
			// })
		}


	}
</script>

<style scoped lang="less">
	.both {
		display: block;
		clear: both;
	}

	.list {
		.text {
			width: calc(100% - 225rpx - 25rpx);
			display: inline-block;
			vertical-align: middle;
			font-size: 26rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: rgba(77, 77, 77, 1);
		}
	}


	.p {
		font-size: 24upx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #F0406F;
		margin-top: 22upx;
	}

	.p text {
		font-size: 30rpx;
		margin-right: 12rpx;
	}

	.p navigator {
		display: inline-block;
		float: right;
		width: 122rpx;
		height: 41rpx;
		background: rgba(240, 64, 111, 1);
		border-radius: 21rpx;
		font-size: 19rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		line-height: 41rpx;
		text-align: center;
	}

	.nav {
		margin-top: 18rpx;
	}

	.nav navigator {
		display: inline-block;
		width: 97rpx;
		height: 45rpx;
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(240, 64, 111, 1);
		color: rgba(240, 64, 111, 1);
		text-align: center;
		font-size: 22rpx;
		line-height: 45rpx;
		border-radius: 23rpx;
	}

	.nav .add {
		display: inline-block;
		float: right;
		width: 33rpx;
		margin-top: 10rpx;
	}

	.nav .add image {
		display: block;
		width: 100%;

	}

	.list {
		width: 90%;
		margin: auto;
		padding-top: 30rpx
	}

	.list .li {
		background: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;

		.title {
			font-size: 26upx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: rgba(240, 64, 111, 1);
			display: flex;
			align-items: center;
			margin-bottom: 20upx;

			image {
				width: 32upx;
				height: 32upx;
				margin-right: 15upx;
			}

		}
	}

	.imgbox {
		width: 225rpx;
		display: inline-block;
		vertical-align: middle;
		margin-right: 25rpx;
		// border-right: 1px solid #EFEFEF;
	}

	.imgbox image {
		max-width: 197rpx;
	}

	.top {
		height: 62rpx;
		background: #040000;
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(231, 231, 231, 1);
		text-align: center;
		display: flex;
		line-height: 62rpx;
		width: 100%;
		justify-content: space-around;
		z-index: 1000;
	}

	.top navigator {
		flex: 1;
		margin-left: 90rpx;
		margin-right: 90rpx;
	}

	.active {
		border-bottom: 3rpx solid #F0406F;
		color: #F0406F;
	}

	uni-page-body {
		height: 100%;
	}

	.mord {
		min-height: 100%;
		background: #EEEEEE;
	}

	.oderMsg {
		margin-top: 10rpx;
		background: #fff;
		padding: 25rpx 0;
	}

	.oderMsg .h3 {
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		margin-bottom: 25rpx;
	}

	.oderMsg .p {
		font-size: 22rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		line-height: 48rpx;

		display: flex;
		justify-content: space-between;
	}

	.oderMsg .p text {
		font-size: 19upx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		display: inline-block;
		width: 150rpx;
	}

	.oderMsg .p .txt {
		display: inline-block;
		font-size: 19upx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
	}

	.tips {
		margin: 13.5upx auto;
		font-size: 31upx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #F04070;
	}

	.group-btn {
		display: flex;
		justify-content: space-around;
		align-items: center;

		text {
			width: 194upx;
			height: 47upx;
			border-radius: 24upx;
			text-align: center;
			line-height: 47upx;
			font-size: 19upx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #FFFFFF;
		}

		.cancel {
			background: #F04070;
		}

		.fixd {
			background: #000;
		}
		
	}
	.box{
		width: 516upx;
		height: 309upx;
		background: #FFFFFF;
		border-radius: 5upx;
		display: flex;
		flex-direction: column;
		.title{
			margin-top: 33upx;
			font-size: 23upx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #333333;
			text-align: center;
		}
		.input-group{
			margin-top: 53upx;
			display: flex;
			flex-direction: column;
			padding: 0 54upx;
			.input-item{
				display: inline-flex;
				justify-content: flex-start;
				align-items: center;
				margin-bottom: 29upx;
				text{
					display: inline-block;
					width: 120upx;
					font-size: 19upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #333333;
				}
				.right-box{
					width: 280upx;
					height: 31upx;
					border: 1px solid #999999;
					border-radius: 5upx;
					font-size: 19upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #999;
					// padding-left: 10upx;
					.uni-input{
						font-size: 19upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #999;
						margin-left: 10upx;
					}
					
				}
			}
		}
		.btn-group{
			display: flex;
			justify-content: space-around;
			align-items: center;
			
			text {
				width: 119upx;
				height: 31upx;
				border-radius: 16upx;
				text-align: center;
				line-height: 31upx;
				font-size: 19upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #FFFFFF;
			}
			
			.cancel {
				background: #F04070;
			}
			
			.fixd {
				background: #000;
			}
		}
	}
	
</style>
